<template>
  <div class="chinaMap">
    <div id="chinaMap" class="echarts"></div>
  </div>
</template>

<script>
export default {
  name: "chinaMap",
  components: {},
  props: {},
  data () {
    return {
      
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getChinaMap();
  },
  methods: {
    getChinaMap(){
      let chartDom = document.getElementById("chinaMap");
      let chart = this.$echarts.init(chartDom);
      let option = {
        tooltip: { //自定义鼠标悬停之后弹窗的样式
          className: "custom-tooltip-bk-box",
          triggerOn: "mousemove", // 鼠标移动时触发
          axisPointer: {
            type: "none",
          },
          // 鼠标移到图里面的浮动提示框
          // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
          formatter(params, ticket, callback) {
            // params.data 就是series配置项中的data数据遍历
            let deptTotal, schoolTotal, studentTotal;
            if (params.data) {
              deptTotal = params.data.value;
              schoolTotal = params.data.schoolTotal;
              studentTotal = params.data.studentTotal;
            } else {
              // 为了防止没有定义数据的时候报错写的
              deptTotal = 0;
              schoolTotal = 0;
              studentTotal = 0;
            }
            let htmlStr = `
              <div class="custom-tooltip-box">
                <div style='font-size:16px;'>河南：9</div>
                <div>
                  <div style='font-size: 16px;margin-top:6px; display:flex;align-items: center;'>
                    <p>学校数量</p>
                    <p style="margin-left: 30px;"><span style='color:#FFA500'>27</span>所</p>
                  </div>
                  <div style='font-size: 16px; display:flex;align-items: center;'>
                    <p>学生数量</p>
                    <p style="margin-left: 30px;"><span style='color:#4FF8FF'>6602</span>个</p>
                  </div>
                </div>
              </div>
            `;
            return htmlStr;
          },
          backgroundColor: "rgba(255,255,255,0)", //提示标签背景颜色
          textStyle: { color: "#fff" }, //提示标签字体颜色
        },
        visualMap: [
          {
            //颜色的设置  dataRange
            show: false,
            itemSymbol: "circle",
            left: 120,
            top: 0,
            splitList: [
              { start: 11, color: "lightskyblue", label: ">5000" },
              { start: 5, end: 10, color: "#F04B5F", label: "1000-500" },
              { start: 3, end: 4, color: "#1AABFF", label: "100-1000" },
              { start: 1, end: 2, color: "#FF9B50", label: "1-100" },
              { start: 0, end: 0, label: "暂无数据", color: "#196392" },
            ],
            textStyle: {
              color: "#fff",
            },
          },
        ],
        // geo配置详解： https://echarts.baidu.com/option.html#geo
        geo: {
          // 地理坐标系组件用于地图的绘制
          map: "china", // 表示中国地图
          roam: false, // 是否开启鼠标缩放和平移漫游
          // scaleLimit: { //滚轮缩放的极限控制
          //     min: 1,
          //     max: 2
          // },
          zoom: 1.05, // 地图放大
          aspectScale: 0.9, //地图宽高比例
          label: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#2862B3", //设置区域颜色
              borderColor: "#8DC3F4", //设置各各省市边界颜色
              shadowOffsetX: 6,
              shadowOffsetY: 6,
              shadowBlur: 10,
              borderWidth: 1,
              shadowColor: "RGBA(164, 211, 253, 0.2)",
            },
            emphasis: { //鼠标悬停之后显示的样式
              color: "#ffffff",
              areaColor: "#1B4FB6",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            name: "", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
            type: "map",
            geoIndex: 0,
            label: {
              show: true,
            },
            // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接
            data: [],
          },
        ],
      }
      chart.setOption(option);
    }
  },
}
</script>

<style lang="less" scoped>
.chinaMap {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #fff;
  .echarts{
    width: 100%;
    height: 100%;
  }
}
</style>